<!--
 * FilePath     : \src\views\home\components\hotSaleMolde.vue
 * Author       : SJZ
 * Date         : 2025-03-26 22:13
 * LastEditors  : SJZ
 * LastEditTime : 2025-04-08 21:26
 * Description  : 热销类型
 * CodeIterationRecord: 
 -->
<template>
  <div class="mt-50 px-10% box-border">
    <div class="aline-between">
      <h1>Hot-Sale <span class="theme-color-primaryFontColor">Models</span></h1>
      <h3 class="b-b-dashed b-b-1 theme-bc-borderColor pb-3 theme-color-info cursor-pointer">MORE MODELS</h3>
    </div>
    <div class="aline-start">
      <div
        v-for="(model, index) in hotSaleMoldes"
        :key="index"
        class="group pos-relative y-aline-start w-23% h-400 m-10 b-1-#cccccc cursor-pointer hover:theme-bc-primaryFontColor"
      >
        <img
          :src="model.logo"
          :alt="model.name"
          width="100%"
          height="300"
          class="object-contain m-10 group-hover:(scale-105 brightness-110)"
        />
        <div class="name h-80 lh-80px text-center group-hover:(theme-bgc-primaryFontColor c-#ffffff)">{{ model.name }}</div>
        <div v-if="model.tags.length" class="y-aline-start pos-absolute top-5 right-5">
          <el-tag v-for="tag in model.tags" :key="tag.label" :color="tag.color" effect="dark" round class="mb-5">
            {{ tag.label }}
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  hotSaleMoldes: {
    type: Array as PropType<Record<string, any>[]>,
    require: true
  }
});
</script>

<style lang="scss" scoped></style>
